<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="static/css/aui.2.0.css">
    <link rel="stylesheet" href="static/css/aui-slide.css">
    <link rel="stylesheet" href="static/css/common.css">
    <link rel="stylesheet" href="static/css/alert.css">
    <link rel="stylesheet" href="static/css/home.css">
    <style>
        body{
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            overflow-scrolling: touch;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>
<body>
<header>
    <!--<div class="null-status">&nbsp;</div>-->
    <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius">
            <form class="search-form">
                <i class="aui-iconfont aui-icon-search"></i>
                <input type="search" readonly="readonly" placeholder="请输入商家、商品名称" id="search-input" autocomplete="off">
                <div class="aui-searchbar-clear-btn" id="clean-search">
                    <i class="aui-iconfont aui-icon-close"></i>
                </div>
                <span class="searchText">搜索</span>
            </form>
        </div>
        <div class="aui-searchbar-btn aui-text-info" tapmode>
            <i class="aui-iconfont aui-icon-location"></i>
            <span class="location-text">位置</span>
        </div>
    </div>
</header>
<section class="null-section" id="body"></section>

<script type="text/x-handlebars-template" id="body-template">
        <!--轮播图-->
        <section>
            <div id="aui-slide">
                <div class="aui-slide-wrap" >
                    {{#each banners}}
                    <div class="aui-slide-node bg-dark">
                        <a href="javascript:;" class="display-box banner-box">
                            <img src="static/img/lazy.gif" data-src="{{image}}" />
                        </a>
                    </div>
                    {{/each}}
                    <!--<div class="aui-slide-node bg-dark">
                        <a href="javascript:;" class="display-box">
                            <img src="static/img/img3.jpg" />
                        </a>
                    </div>-->
                </div>
                <!--分页容器-->
                <div class="aui-slide-page-wrap"></div>
            </div>
            <div id="aui-slide1">
                <div class="aui-slide-wrap" >
                    {{#each (cateList categorys)}}
                    <div class="aui-slide-node">
                        <div class="aui-grid">
                            <div class="aui-row">
                                {{#each this}}
                                <div class="aui-col-xs-3">
                                    <a href="javascript:;" class="menu-box" data-id="{{id}}">
                                        <img src="{{image}}" class="home-icon" alt="">
                                        <div class="aui-grid-label">{{name}}</div>
                                    </a>
                                </div>
                                {{/each}}
                            </div>
                        </div>
                    </div>
                    {{/each}}
                    <!--<div class="aui-slide-node">
                        <div class="aui-grid">
                            <div class="aui-row">
                                <div class="aui-col-xs-3">
                                    <a href="javascript:;" class="menu-box">
                                        <img src="static/img/home-icon-cam.png" class="home-icon" alt="">
                                        <div class="aui-grid-label">摄影</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>-->
                </div>
                <div class="aui-slide-page-wrap"><!--分页容器--></div>
            </div>
        </section>
        <div class="home-null"></div>
        <section class="home-recommend">
            <div class="select-more"></div>
            <div class="home-recommend-title display-flex-row">
                <div class="home-line"></div>
                <div class="home-title-text">商家推荐</div>
                <div class="home-line"></div>
            </div>
            <div class="select-more">
                <a href="shops_more.html" class="display-box display-flex-row">
                    <span>更多</span>
                    <img class="select-more-img" src="static/img/content-icon-arrow.png" alt="">
                </a>
            </div>
        </section>
        <ul id="shop-box">
            {{#each stores}}
            <li class="shop-list">
                <a href="shop_detail.html?id={{id}}" class="display-box display-flex-row">
                    <div class="shop-img-box">
                        <img src="static/img/lazy.gif" data-src="{{mainImage}}" alt="" class="shop-img">
                    </div>
                    <div class="shop-info-box">
                        <div class="shop-name-box display-flex-row">
                            <div class="shop-name">{{name}}</div>
                            <div class="shop-location">
                                <img class="shop-location-img" src="static/img/location_icon.png" alt="">
                                <span class="distance">{{juli}}km</span>
                            </div>
                        </div>
                        <div class="shop-address">{{address}}</div>
                        <div class="shop-price">客单价￥{{price}}</div>
                        <div class="shop-hongbao-box display-flex-row">
                            <div class="shop-hongbao">返红包￥{{hongbao}}</div>
                            <div class="shop-pingjia">好评率{{feedbackPercent}}%</div>
                        </div>
                    </div>
                </a>
            </li>
            {{/each}}
        </ul>
        <div class="no-info">没有更多信息了</div>
        <div class="loading">加载更多...</div>
</script>
<script id="more-template" type="text/x-handlebars-template">
    {{#each stores}}
    <li class="shop-list">
        <a href="shop_detail.html?id={{id}}" class="display-box display-flex-row">
            <div class="shop-img-box">
                <img src="static/img/lazy.gif" data-src="{{mainImage}}" alt="" class="shop-img">
            </div>
            <div class="shop-info-box">
                <div class="shop-name-box display-flex-row">
                    <div class="shop-name">{{name}}</div>
                    <div class="shop-location">
                        <img class="shop-location-img" src="static/img/location_icon.png" alt="">
                        <span class="distance">{{juli}}km</span>
                    </div>
                </div>
                <div class="shop-address">{{address}}</div>
                <div class="shop-price">客单价￥{{price}}</div>
                <div class="shop-hongbao-box display-flex-row">
                    <div class="shop-hongbao">返红包￥{{hongbao}}</div>
                    <div class="shop-pingjia">好评率{{feedbackPercent}}%</div>
                </div>
            </div>
        </a>
    </li>
    {{/each}}
</script>

<script src="lib/jquery-3.0.0.min.js"></script>
<script src="lib/aui-slide.js"></script>
<script src="lib/handlebars-v4.0.10.js"></script>
<script src="lib/aui-lazyload.js"></script>
<script src="static/js/config.js"></script>
<script src="static/js/alert.js"></script>
<script src="static/js/function.js"></script>
<script src="static/js/com_helper.js"></script>
<script src="static/js/home.js"></script>
<script>
    /**
     * token token，
     * locationName 当前位置
     * cityCode 地市编码
     * */
    function getToken(token) {
        var result = token.split(',');
        $('.location-text').html(result[1]);
        localStorage.setItem('token',result[0]);
        localStorage.setItem('cityCode',result[2]);
        //dialog.tusiError(token);
    }
</script>
</body>
</html>
